import React from 'react'
import Progress from '../../../../components/afterLoan/Progress'
import UserTitle from '../../../../components/afterLoan/UserTitle'
import RepaymentList from '../../../../components/afterLoan/RepaymentList'
import { Space, DatePicker, Input, Button, Descriptions, Cascader, Checkbox, InputNumber } from 'antd'
import PrepaymentForm from '../../../../components/afterLoan/PrepaymentFrom'
import moment from 'moment';

import PreInfo from '../../../../components/afterLoan/PreInfo'

const dateFormat = 'YYYY-MM-DD';

const columns1 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
        render: () => (
            <Space>
                <DatePicker style={{ minWidth: 100 }} disabled />
            </Space>
        )
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '管理费',
        dataIndex: 'manage_money',
    },
    {
        title: '罚息',
        dataIndex: 'interest_penalty',
    },
    {
        title: '变更费',
        dataIndex: 'change_money',
    },
    {
        title: '提前罚款费',
        dataIndex: 'pre_penalty',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '状态',
        dataIndex: 'prepayment_status',
    },
    {
        title: '逾期天数',
        dataIndex: 'over_days',
    },
    {
        title: '罚息减免',
        dataIndex: 'penalty_derate',
    },
    {
        title: '备注',
        dataIndex: 'prepayment_remark',
        render: () => (
            <Space>
                <textarea cols="10" rows="2" disabled></textarea>
            </Space>
        )
    },
    {
        title: '财务备注',
        dataIndex: 'finance_remark',
        render: () => (
            <Space>
                <textarea cols="10" rows="2" disabled></textarea>
            </Space>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                {/* <Button type="default">提交确认</Button> */}
            </Space>
        )
    }
];

const columns2 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
        render: () => (
            <Space>
                <DatePicker style={{ minWidth: 100 }} defaultValue={moment('2018-01-14', dateFormat)} format={dateFormat} disabled />
            </Space>
        )
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '管理费',
        dataIndex: 'manage_money',
    },
    {
        title: '罚息',
        dataIndex: 'interest_penalty',
    },
    {
        title: '变更费',
        dataIndex: 'change_money',
    },
    {
        title: '提前罚款费',
        dataIndex: 'pre_penalty',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '状态',
        dataIndex: 'prepayment_status',
    },
    {
        title: '逾期天数',
        dataIndex: 'over_days',
    },
    {
        title: '罚息减免',
        dataIndex: 'penalty_derate',
    },
    {
        title: '备注',
        dataIndex: 'prepayment_remark',
        render: () => (
            <Space>
                <textarea cols="10" rows="2" disabled defaultValue={"客户张某某已还款"}></textarea>
            </Space>
        )
    },
    {
        title: '提交人',
        dataIndex: 'submit_person',
    },
    {
        title: '提交时间',
        dataIndex: 'submit_time',
    },
    {
        title: '审核',
        dataIndex: 'pre_audit ',
    },
    {
        title: '财务备注',
        dataIndex: 'finance_remark',
        render: () => (
            <Space>
                <textarea cols="10" rows="2" disabled defaultValue={"已核对"}></textarea>
            </Space>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                {/* <Button type="default">提交确认</Button> */}
            </Space>
        )
    }
];

const data1 = [];
for (let i = 0; i < 3; i++) {
    data1.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        real_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        manage_money: (0 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        over_days: 0,
        prepayment_status: '-',
        prepayment_remark: '',
        interest_penalty: (0 / 100).toFixed(2),
        change_money: (0 / 100).toFixed(2),
        pre_penalty: (0 / 100).toFixed(2),
        penalty_derate: (0 / 100).toFixed(2),
        finance_remark: '',
    })
}

const data2 = [];
for (let i = 0; i < 3; i++) {
    data2.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        real_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        manage_money: (0 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        over_days: 0,
        prepayment_status: '提前还款-未代扣',
        prepayment_remark: '',
        interest_penalty: (0 / 100).toFixed(2),
        change_money: (0 / 100).toFixed(2),
        pre_penalty: (0 / 100).toFixed(2),
        penalty_derate: (0 / 100).toFixed(2),
        finance_remark: '',
        submit_person: '李某某',
        submit_time: '2018-01-14',
        pre_audit: '已还款'
    })
}

export default function PrePaymentCheck({ location, history }) {

    return (
        <div className="prepayment-check">
            <Progress title="提前还款" goBack={history.goBack} />
            <UserTitle name={location.name} type="提前还款办理" isSubmit={location.state === 1} />
            <RepaymentList columns={(location.state && location.state === 3 && columns2) || columns1} data={(location.state && location.state === 3 && data2) || data1} />
            {location.state === 3 ? null : <PrepaymentForm state={location.state || 1} goBack={history.goBack} />}
            <PreInfo />
        </div>
    )
}
